<template>
  <div class="tabs_card"
       style="height:66px;padding:4px;">
    <div style="height:58px;box-shadow: 0px 0px 8px 0px #F0F0F0;padding:10px 16px;display:flex;justify-content:space-between">
      <div style="max-width:500px">
        <div style="display:flex;align-items:center;height:26px;overflow: hidden;">
          <div style="width:5px;height:16px;margin-right:10px;border-radius: 1px;" :style="{backgroundColor:statusColor(item)}"></div>
          <div>
            <div class="text_ellipsis"
                 style="color:#404040FF;font-size:18px;font-weight:600;width: 100%;;margin-top:-3px"><span>{{item[configScript.name]}}</span></div>
          </div>
        </div>
        <el-tooltip :open-delay="1000" class="item"
                    effect="dark" :disabled="!item[configScript.description]"
                    :enterable="false" :content="item[configScript.description]"
                    placement="top-start">
          <div class="text_ellipsis"
               style="color:#7F7F7FFF;margin-left:15px;margin-top:-3px">{{item[configScript.description]}}</div>
        </el-tooltip>
      </div>
      <div @click="goToUrl(item)" class="cursor" style="margin-left:30px;align-self:center;font-size: 14px;color: #0050B3;display:flex;align-items:center">
        <span style="font-weight:600">view</span> <span class="cuifont icon_right_arrow_alt" style="margin-left:9px;"></span>
      </div>
    </div>
    <model :showSetting="queryModelDefaultSetting.showSetting"
                @queryModelClosed="queryModelClosed"
                :dataInfo="queryModelDefaultSetting.dataInfo"
                :mappingForm="mappingFormSetting"
                :updateGadget="upgradeGadgetSetting" />
    <add-or-update v-if="addOrUpdateVisible"
                    ref="addOrUpdate"
                    @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/crud-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'
import AddOrUpdate from '@/views/modules/mspbots/bots-bak/my-bots/bot-edit'
export default ({
  mixins: [mixinViewModule],
  components: {
    // model,
    AddOrUpdate, model: () => import('@/components/gadget/query-model/query-model')
  },
  props: {
    configScript: {
      type: Object,
      default: function () {
        return {}
      }
    },
    item: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data: function () {
    return {
      addOrUpdateVisible: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: '',
          gadgetId: '',
          gadgetType: '',
          gadgetSetting: {},
          reuse: true
        }
      }
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  methods: {
    upgradeGadgetSetting () {

    },
    mappingFormSetting () {

    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.cardQuery()
    },
    statusColor (item) {
      var temp = null
      switch (item.status) {
        case 'In-Dev':
          temp = '#F56C6C'
          break
        case 'Published':
          temp = '#67C23A'
          break
        case 'Alpha':
          temp = '#E6A23C'
          break
        case 'In-QA':
          temp = '#909399'
          break
        case 'Requested':
          temp = '#138DC7'
          break
        default:
          break
      }
      return temp
    },
    design (row) {
      this.queryModelDefaultSetting.dataInfo.businessId = row.businessId
      this.queryModelDefaultSetting.dataInfo.gadgetId = row.gadget_id
      this.queryModelDefaultSetting.dataInfo.gadgetType = row.gadget_type
      this.queryModelDefaultSetting.dataInfo.gadgetSetting = row.gadgetSetting
      this.$nextTick(() => {
        this.$store.state.isWidget = true
        this.queryModelDefaultSetting.showSetting = true
      })
    },
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    },
    goToUrl (data) {
      var _self = this
      if (_self.configScript.Permission === 'widget') {
        _self.design(data)
      } else if (_self.configScript.Permission === 'bots') {
        if (data.version === 1) {
          _self.addOrUpdateHandle(data.id)
        } else if (data.version === 2) {
          _self.$store.commit('RECORDBOTID', data.id)
          // _self.$router.push({ name: 'mspbots-bots-bak-bot-view-index', query: { botId: data.id } })
          // _self.$router.push({ name: 'mspbots-bots-bak-bot-design-index', query: { botId: data.id } })
          _self.$router.push({ path: `bot-${data.id}`, query: { pageid: 'botdetail', botId: data.id } })
        }
      } else {
        // addSyncListRoute(data, _self.configScript.Permission)
        _self.$router.push({ path: `${_self.configScript.Permission}-${data.id}`, query: { pageid: data.id } })
      }
    }
  }

})
</script>
<style lang="scss" scoped>
.cursor {
  cursor: pointer;
}
.text_ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  // max-width: 750px;
  height: 20px;
  line-height: 20px;
}
</style>
